<template>
  <div class="page-container">
    <div class="toolbar">
      <el-row>
        <el-tabs type="border-card">
          <el-tab-pane label="基本信息">
            <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm"
                     :rules="dataFormRules" class="form">
              <el-row style="margin-top: -20px;">
                <el-divider content-position="center">
                  <span style="font-size:16px;font-weight:800">基本信息</span>
                </el-divider>
                <el-form-item label="" v-show="false">
                  <el-input v-model="dataForm.id" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="单据编号">
                  <el-input v-model="dataForm.code" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="关联商品Id">
                  <el-input v-model="dataForm.productId" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="订单编号">
                  <el-input v-model="dataForm.orderId" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="操作的台账Id">
                  <el-input v-model="dataForm.balanceId" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="操作编码">
                  <el-input v-model="dataForm.operateId" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="操作描述">
                  <el-input v-model="dataForm.operateDesc" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="申请增减的数量;">
                  <el-input v-model="dataForm.applyNum" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="实际增减的数量">
                  <el-input v-model="dataForm.actualNum" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="操作类型(正号为加,负号为减;)">
                  <el-input v-model="dataForm.caculateType" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="批次号">
                  <el-input v-model="dataForm.batchNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input v-model="dataForm.remark" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="台账类别">
                  <el-select v-model="dataForm.type" placeholder="请选择台账类别">
                    <el-option label="表示实体仓台账" value="1"></el-option>
                    <el-option label="表示虚拟仓台账" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-form>
            <div class="tool-wrap">
              <div class="left-area">
                <el-button-group>
                  <el-button type="primary" size="small" @click="submitForm()">保存</el-button>
                  <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
                </el-button-group>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>
</template>
<script>
  import jicTable from '@/components/jicComponentGallery/jicTable';
  import {mapState} from "vuex";
  import ThemePicker from "@/components/ThemePicker";
  import LangSelector from "@/components/LangSelector";
  import VDistpicker from 'v-distpicker';
  import elTree from '@/views/tree/src/tree.vue'
  export default {
    components: {
      jicTable,
      ThemePicker,
      LangSelector,
      VDistpicker,
      elTree,
    },
    data() {
      return {
        searchSize: 'mini',
        dataForm: {
          id: null, code: null,
          product_id: null,
          order_id: null,
          balance_id: null,
          operate_id: null,
          operate_desc: null,
          apply_num: null,
          actual_num: null,
          caculate_type: null,
          create_time: null,
          update_time: null,
          creator: null,
          updater: null,
          delete_flag: null,
          status: null,
          batch_no: null,
          remark: null,
          type: null,
        },
        dataFormRules: {
          id: [{required: true, message: "请输入", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          code: [
            {required: true, message: "请输入单据编号", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          product_id: [
            {required: true, message: "请输入关联商品Id", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          order_id: [
            {required: true, message: "请输入订单编号", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          balance_id: [
            {required: true, message: "请输入操作的台账Id", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          operate_id: [
            {required: true, message: "请输入操作编码", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          operate_desc: [
            {required: true, message: "请输入操作描述", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          apply_num: [
            {required: true, message: "请输入申请增减的数量;", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          actual_num: [
            {required: true, message: "请输入实际增减的数量", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          caculate_type: [
            {required: true, message: "请输入操作类型(正号为加,负号为减;)", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          create_time: [
            {required: true, message: "请输入创建时间", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          update_time: [
            {required: true, message: "请输入", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          creator: [
            {required: true, message: "请输入创建人", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          updater: [
            {required: true, message: "请输入修改人", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          delete_flag: [
            {required: true, message: "请输入删除标志", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          status: [
            {required: true, message: "请输入状态(0-待处理;1-已完成)", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          batch_no: [
            {required: true, message: "请输入批次号", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          remark: [
            {required: true, message: "请输入备注", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          type: [
            {required: true, message: "请输入台账类别;1-表示实体仓台账;2-表示虚拟仓台账;", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
        },

      }
    },

    methods: {
      getDetail() {
        let this_ = this;
        if (this.$route.params != null && this.$route.params.id != null && this.$route.params.id != '' && this.$route.params.id != "undefined") {
          let params = {};
          params.id = this.$route.params.id;
          this.utils.request.getMStoreOperateDetail(params, function (res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
            } else {
              this_.$message({message: "操作失败, " + data.msg, type: "error"});
            }
          });
        }
      },

      submitForm: function () {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.editLoading = true;
              let params = Object.assign({}, this.dataForm);
              this.utils.request.saveMStoreOperate(params, this.editInfoBack);
              this.$router.go(-1);
            });
          }
        });
      },
// 7.页面弹窗处理方法
      add() {
        this.dialogVisible = true;
      },

// 8.关闭弹窗
      handleClose() {
        this.dialogVisible = false;
      },

      /*图片预览*/
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      /*图片移除*/
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
//==========2.3.1 JavaScript 自定义方法区==========


    },
//1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
      this.getDetail();
    },

  }
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
